<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title>Title</title>
</head>
<body>

jQuery -- 模块，类库
    集成了DOM/BOM/JavaScript的类库
    版本：
        1.x  -- 兼容性(IE)更好
        2.x
        3.x
    尾部引入：
        百度压缩版引用地址:<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
        微软压缩版引用地址:<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.3.min.js"></script>
        官网jquery压缩版引用地址:<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    本地引入：
    调用：
        jQuery.xx === $.xx
    转换：
        DOM对象使用DOM的属性和方法；jQuery对象使用jQuery的属性和方法；
        jQuery对象的第0个元素  ==》DOM对象
        DOM对象  ==》 $(DOM对象) == jQuery对象
    一、查找元素
    二、操作元素

依据文档:http://jquery.cuishifeng.cn/
**************一、查找元素****************
选择器：直接找到某个或者某类标签 -- 是字符串
    基本：
        1、id     //$('#id')
        2、class  //$(".c1")
        3、标签   //$('a') 所有的a标签
        4、组合选择,用逗号 //$('a,.c2,#i1')  找到所有的a标签和class=c2的标签和id=i1的标签
    层级：
        5、查找子孙中所有符合条件的标签 -- 用空格 //$('#i1 a') 查找id=i1标签下面的所有a标签
        6、查找儿子中所有符合条件的标签 -- 用>  //$('#i1>a') 查找id=i1标签儿子标签中的a标签
        7、查找下一个兄弟标签     --  用 + //$('#i1 + a') 查找id=i1标签下面兄弟标签的第一个a标签
        8、查找所有兄弟标签    --  用 ~    //$('#i1 ~ a ')查找id=i1标签的所有兄弟标签
    基本筛选器：
        9、 :first    // $('li:first')
            :last
            :submit  //所有input中type=submit的标签
        10、:not(selector)  //$('input:not(:checked)')
        11、:even    从0开始计数，匹配所有索引值为偶数的元素    //$('tr:even')
        12、:odd     从 0 开始计数,匹配所有索引值为奇数的元素   //$('tr:odd')
        13、:eq(index)      //$('#id a:(1)')  查找id=i1标签下面的所有a标签中的索引值等于1的元素
        14、:gt(index)
        15、:lt(index)
    属性：
        16、$('[alex]')   //具有alex属性的所有标签
            $('[alex="123"]')  //具有alex=123属性的标签
            $('input[type="text"]')  //查找type=text的input标签
    三元运算：  var v = 条件 ? 值1 : 值2   //如果条件为真返回值1，否则返回值2
筛选器 -- 在选择器的基础上做筛选 -- 选择器.方法(参数)
    查找：
        next()       //下一个
        nextAll()    //$('#i1').nextAll()   id=i1以下所有
        nextUntil()  //$('#i1').nextUntil('#i2')  从id=i1往下查找，到id=i2结束

        prev()       //上一个
        prevAll()
        prevUntil()

        parent()     //获取父标签
        parents()    //所有上一级,
        parentsUntil() // 限定结束的标签

        children()   //获取所有子元素
        siblings()   //获取所有兄弟标签
        find()       //所有下级元素中查找
    过滤：
        eq(index)    //$('li').eq(1)
        first()
        last()
        hasClass(class)
**************二、操作元素****************
文本操作：
    $().html()
    $().html('<a>1234</a>')

    $().text()      //获取文本内容 -- 不解析HTML
    $().text('abcd') //设置文本内容 -- 不解析HTML

    $().val()   //(value) 封装的DOM的value，获取input输入的值,包括select的值
    $().val('abc')  //设置输入框（和其他类型的input）的值
样式操作：
    addClass()
    removeClass()
    toggleClass()
属性操作：
    $().attr('i1')  //获取属性的值
    $().attr('name','tom')  //修改，添加属性
    $().removeAttr('i1')  //删除属性

    #专门用于checkbox,radio  (使用attr会有bug)
    $().prop('checked')   //获取值，得到true或者false
    $().prop('checked',true)  //设置值
    $().index([selector|element])   //返回元素索引位置
文档处理：
    添加
        append()   //在标签内部最后面添加
        prepend()  //在标签内部最前面添加
        after()    //在标签平级的下面添加
        before()   //在标签平级的上面添加
    删除：
        remove()   //删除标签及标签内的内容
        empty()    //只删除标签内的内容，保留标签占位
    克隆:
        clone()    //复制
CSS处理：
    CSS
        $().css('样式名称','样式值')  // $('i1').css('color','red')
    位置：
        $().scrollTop([val])
        $().scrollLeft([val])
        $(window).scrollTop()  //获取滚轮位置
        $(window).scrollTop(0) //设置滚轮位置 -- 返回顶部

        $().offset()  //从整个文档中查找，获取指定标签在HTML中的坐标 -- 用来移动标签等。
        $().offset().left
        $().offset().top
        $().position()  //获取指定标签相对父标签(relative)标签的坐标。
    尺寸：
        $('i1').height()   //获取i1标签的高度 -- 纯高度(height)
        $('i1').innerHeight()   //获取边框 + 纯高度(height+border)
        $('i1').outerHeight()   //
        $('i1').outerHeight(true)  //
事件：
    DOM：三种绑定方式
    jQuery：
        一：$().click()
        二：$().bind('click',function(){})
            $().unbind('click',function(){})
        三：委托
            $('.c').delegate('a','click',function(){})  //class=c标签下面的所有a标签都绑定click事件
            $('.c').undelegate('a','click',function(){})  //解绑class=c标签下面的所有a标签都绑定click事件
        四：以上几种绑定方式，内部调用的都是on
            $().on('click',function(){})
            $().off('click',function(){})
    默认事件：
        一般情况下，自定义事件先执行，默认事件后执行。
        a标签
        submit
        input
        checkbox -- 默认事件先于自定义事件执行，（即，先打对号）
    阻止事件发生
        return false
    当页面框架加载完成之后，自动执行
        $(function(){ 事件 })   //将js代码块放入其中，（否则，不放入其中，是当页面所有元素加载完成后，才绑定事件） TODO：是否仅仅将绑定事件的js代码放入其中，还是所有的？
            实例说明：在TAB菜单中有一个大图片没有加载完成，如果使用上面的方法，TAB菜单切换就生效；否则绑定事件会等图片完全加载完后才绑定，此时TAB菜单切换不生效；

</body>
</html>